<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<link rel="stylesheet" href="css/iconfont.css">
	<link rel="stylesheet" href="css/index.css">
    <title>菜单</title>
</head>
<body>
    <div style="float:left; width: 30%; height: 100%; background-color:#ffffff">
      <div class="container-fluid">
         <div class="row justify-content-end">
            <div class="col-lg-4 position-fixed border-right leftCon">
               <!-- 导航栏 -->
               <header class="navbar d-none d-sm-flex px-0 px-lg-3 py-3 py-lg-4">
                  <a href="#" class="navbar-brand"><img src="images/logo.svg" alt="" width="36"></a>
                  <ul class="nav mr-auto">
                     <li class="nav-item">
                        <a href="#" class="nav-link text-dark font-weight-bold">门店</a>
                     </li>
                     <li class="nav-item">
                        <a href="#" class="nav-link text-dark font-weight-bold">我的账户</a>
                     </li>
                     <li class="nav-item">
                        <a href="#" class="nav-link text-dark font-weight-bold">菜单</a>
                     </li>
                  </ul>
                  <span class="iconfont icon-menu" id="showBtn"></span>
               </header>
   
               <!-- 标题与登录注册 -->
               <div class="d-flex align-items-center login">
                  <div class="px-0 px-lg-5">
                     <h1 class="font-weight-bold py-3">心情惬意，来杯咖啡吧 <span class="iconfont icon-kafei"></span></h1>
                     <div class="d-none d-sm-block my-3">
                        <a href="#" class="text-success">
                           <span class="iconfont icon-denglu"></span>
                           <span>登录</span>
                        </a>
                        <a href="#" class="btn btn-outline-success ml-4 register">注册</a>
                     </div>
                  </div>
               </div>
   
               <!-- 点击菜单后要展示的内容 -->
               <div class="d-flex bg-white flex-column justify-content-between position-absolute menu hide">
                  <header class="navbar d-flex px-0 px-lg-3 py-3 py-lg-4">
                     <a href="#menu" class="navbar-brand"><img src="images/lo go.svg" alt="" width="36"></a>
                     <span class="iconfont icon-guanbi" id="closeBtn"></span>
                  </header>
                  <div class="list">
                     <ul class="list-unstyled mx-sm-5 pl-sm-5">
                        <li><a href="#" class="font-weight-bold text-dark py-2 d-block">门店</a></li>
                        <li><a href="#" class="font-weight-bold text-dark py-2 d-block">星享俱乐部</a></li>
                        <li><a href="#menu" class="font-weight-bold text-dark py-2 d-block">菜单</a></li>
                        <hr>
                        <li><a href="#" class="font-weight-bold text-dark py-2 d-block">星巴克移动应用</a></li>
                        <li><a href="#" class="font-weight-bold text-dark py-2 d-block">星礼卡</a></li>
                        <li><a href="#" class="font-weight-bold text-dark py-2 d-block">星巴克臻选™</a></li>
                        <li><a href="#" class="font-weight-bold text-dark py-2 d-block">啡快™ － 在线点 到店取</a></li>
                        <li><a href="#" class="font-weight-bold text-dark py-2 d-block">专星送™</a></li>
                        <li><a href="#" class="font-weight-bold text-dark py-2 d-block">咖啡星讲堂</a></li>
                        <li><a href="#" class="font-weight-bold text-dark py-2 d-block">上海烘焙工坊</a></li>
                        <li><a href="#" class="font-weight-bold text-dark py-2 d-block">关于星巴克</a></li>
                        <li><a href="#" class="font-weight-bold text-dark py-2 d-block">帮助中心</a></li>
                        <hr>
                     </ul>	
                  </div>
               </div>
   
            </div>
         </div>
      </div>
   </div>
    <div class="menu" style="float:right; width: 66.6%;height: 100%; background-color: #f7f7f7; display: flex;
    flex-direction: column;">
       <div class="one" style="padding-top: 3%;">
          <h3 style="padding-left: 35px; color: #6c6c6c;">咖啡融合冰淇淋</h3>
          <div class="coffee-iceream" style="width: 100%; height: 40%;  display: flex;
          flex-direction: row;">
               <div id="afuqiduo" style="display: flex;
               flex-direction: column; padding-left: 3%;">
                  <img src="./images/阿馥奇朵.png">
                  <strong style="padding-top: 9%; padding-left: 32%;">阿馥奇朵™</strong>
               </div>
               <div id="cold-brew-malt" style="display: flex;
               flex-direction: column; padding-left: 5%;">
                  <img src="./images/麦芽雪冷萃.png">
                  <strong style="padding-top: 8%; padding-left: 34%;">麦芽雪冷萃™</strong>
               </div>
               <div id="cold-brew-float" style="display: flex;
               flex-direction: column; padding-left: 5%;">
                  <img src="./images/冷萃浮乐朵.png">
                  <strong style="padding-top: 6%; padding-left: 34%;">冷萃浮乐朵™</strong>
               </div>
               <div id="instore-nitro-cold-brew-float" style="display: flex;
               flex-direction: column; padding-left: 5%;">
                  <img src="./images/气致冷萃浮乐朵.png">
                  <strong style="padding-top: 7%; padding-left: 26%;">气致™冷萃浮乐朵™</strong>
                </div>
           </div>
       </div>  
       
       <div class="two" style="padding-top: 2%;">
          <h3 style="padding-left: 35px; color: #6c6c6c;">星巴克冷萃咖啡系列</h3>
          <div class="ice-coffee" style="width:1200px; display: flex;
          flex-direction: row;">
              <div id="cold-brew" style="display: flex;
              flex-direction: column; padding-left: 2%;">
                 <img src="./images/冷萃冰咖啡.png">
                 <strong style="padding-top: 8%; padding-left: 35%;">冷萃冰咖啡</strong>
              </div>
              <div id="vanilla-flavor-sweet-cream-cold-brew" style="display: flex;
              flex-direction: column; padding-left: 4%;">
                 <img src="./images/轻甜奶油冷萃.png">
                 <strong style="padding-top: 8%; padding-left: 34%;">轻甜奶油冷萃</strong>
              </div>
              <div id="cold-foam-cold-brew" style="display: flex;
              flex-direction: column; padding-left: 5%;">
                 <img src="./images/绵云冷萃.png">
                 <strong style="padding-top: 8%; padding-left: 38%;">绵云冷萃</strong>
              </div>
          </div>
       </div>
       <div class="three" style="padding-top: 2%;" >
            <h3 style="padding-left: 35px; color: #6c6c6c;">手工调制浓咖啡</h3>
           <div class="human-coffee" style="display: flex;
             flex-direction: row;">
              <div id="coffee-americano" style="display: flex;
              flex-direction: column; padding-left: 2%;">
                 <img src="./images/美式咖啡（热冷）.png">
                 <strong style="padding-top: 7%; padding-left: 26%;">美式咖啡（热/冷）</strong>
              </div>
              <div id="coffee-latte"style="display: flex;
              flex-direction: column; padding-left: 5%;">
                 <img src="./images/拿铁（热冷）.png">
                 <strong style="padding-top: 7%; padding-left: 34%;">拿铁（热/冷）</strong>
              </div>
              <div id="caffee-mocha" style="display: flex;
              flex-direction: column; padding-left: 5%;">
                 <img src="./images/摩卡（热冷).png">
                 <strong style="padding-top: 7%; padding-left: 34%;">摩卡（热/冷)</strong>
              </div>
              <div id="cappuccino" style="display: flex;
              flex-direction: column; padding-left:4%;">
                 <img src="./images/卡布奇诺（热冷）.png">
                 <strong style="padding-top: 7%; padding-left: 30%;">卡布奇诺（热/冷）</strong>
              </div>
           </div>
           <div  class="human-coffee" style="padding-top: 5%; display: flex;
             flex-direction: row;">
              <div id="caramel-macchiato" style="display: flex;
              flex-direction: column; padding-left:2%;">
                   <img src="./images/焦糖玛奇朵（热冷）.png">
                   <strong style="padding-top: 9%; padding-left: 24%;">焦糖玛奇朵（热/冷）</strong>
                </div>
               <div id="espresso" style="display: flex;
               flex-direction: column; padding-left:5%;">
                   <img src="./images/浓缩咖啡.png">
                   <strong style="padding-top: 9%; padding-left: 35%;">浓缩咖啡</strong>
               </div>
               <div id="flat-white" style="display: flex;
               flex-direction: column; padding-left:6%;">
                   <img src="./images/馥芮白.png">
                   <strong style="padding-top: 9%; padding-left: 42%;">馥芮白</strong>
               </div>
               <div id="hazelnut-flavored-latte" style="display: flex;
               flex-direction: column; padding-left:4%;">
                   <img src="./images/榛果风味拿铁（热冷）.png">
                   <strong style="padding-top: 9%; padding-left:26%;" >榛果风味拿铁（热/冷）</strong>
               </div>
             </div> 
             <div id="vanilla-flavored-latte" style="width: 230px;display: flex;
             flex-direction: column; padding-left:2%; padding-top: 4%;">
                 <img src="./images/香草风味拿铁（热冷）.png">
                 <strong style="padding-top: 10%; padding-left: 24%;" >香草风味拿铁（热/冷）</strong>
             </div>
       </div>
       <div class="four" style="padding-top: 2%;">
           <h3 style="padding-left: 35px; color: #6c6c6c;">星冰乐</h3>
           <div class="star-ice" style="display: flex;
           flex-direction: row;">
              <div id="caramel-espresso-frappuccino" style="display: flex;
              flex-direction: column; padding-left: 2%;">
                 <img src="./images/焦糖浓缩咖啡星冰乐.png">
                 <strong style="padding-top: 9%; padding-left: 24%;">焦糖浓缩咖啡星冰乐</strong>
              </div>
             <div id="green-tea-frappuccino" style="display: flex;
             flex-direction: column; padding-left:5%;">
               <img src="./images/抹茶星冰乐.png">
               <strong style="padding-top: 9%; padding-left: 36%;">抹茶星冰乐</strong>
             </div>
             <div id="mango-passion-tea" style="display: flex;
             flex-direction: column; padding-left:5%;">
               <img src="./images/芒果西番莲果茶星冰乐.png">
               <strong style="padding-top: 9%; padding-left: 22%;">芒果西番莲果茶星冰乐</strong>
             </div>
             <div id="mocha-frappuccino" style="display: flex;
             flex-direction: column; padding-left:5%;">
                <img src="./images/摩卡星冰乐.png">
                <strong style="padding-top: 9%; padding-left: 36%;">摩卡星冰乐</strong>
              </div>
            </div>  
              <div id="vanilla-flavor-cream-frappuccino-blended-beverage" style="width: 230px;display: flex;
              flex-direction: column; padding-left:2%; padding-top: 4%;">
                <img src="./images/香草风味星冰乐.png">
                <strong style="padding-top: 7%; padding-left: 30%;">香草风味星冰乐</strong>
              </div>
           
       </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
		integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
		crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
		integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
		crossorigin="anonymous"></script>
	<script>
		$('#showBtn').on('click',function(){
			$('.menu').removeClass('hide').addClass('show');
			shadowMenu();
		});
		$('#closeBtn').on('click',function(){
			$('.menu').removeClass('show').addClass('hide');
			shadowMenu();
		});

	
	</script>
</body>
</html>